<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网上银行模拟系统</title>
  <style>
    /* 全局样式重置，简化默认样式差异 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "微软雅黑", sans-serif;
      background-color: #f5f5f5;
    }

    /* 顶部欢迎栏样式 */
    .top-bar {
      background-color: #fff;
      text-align: center;
      padding: 15px 0;
      border-bottom: 1px solid #ddd;
    }

    .top-bar h1 {
      font-size: 20px;
      color: #48b2e8;
    }

    /* 导航栏样式 */
    .nav-bar {
      background-color: #48b2e8;
      padding: 10px 0;
      text-align: right;
    }

    .nav-bar a {
      color: #fff;
      text-decoration: none;
      margin-right: 20px;
      font-size: 14px;
    }

    /* 主体内容容器样式 */
    .container {
      width: 800px;
      margin: 20px auto;
      display: flex;
      background-color: #fff;
      border: 1px solid #ddd;
    }

    /* 左侧操作栏样式 - 修改背景色为浅灰色 */
    .left-menu {
      width: 200px;
      border-right: 1px solid #ddd;
      background-color: #f5f5f5; /* 新增：左侧菜单背景色 */
    }

    .left-menu ul {
      list-style: none;
    }

    .left-menu li {
      border-bottom: 1px solid #ddd;
    }

    .left-menu a {
      display: block;
      padding: 12px 15px;
      text-decoration: none;
      color: #333;
      font-size: 14px;
    }

    .left-menu a:hover {
      background-color: #e8e8e8; /* 调整悬停颜色以匹配新背景 */
    }

    /* 中间提示区域样式 */
    .center-tip {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: #333;
    }

    /* 右侧操作栏样式 - 修改背景色为浅灰色 */
    .right-menu {
      width: 200px;
      border-left: 1px solid #ddd;
      background-color: #f5f5f5; /* 新增：右侧菜单背景色 */
    }

    .right-menu ul {
      list-style: none;
    }

    .right-menu li {
      border-bottom: 1px solid #ddd;
    }

    .right-menu a {
      display: block;
      padding: 12px 15px;
      text-decoration: none;
      color: #333;
      font-size: 14px;
    }

    .right-menu a:hover {
      background-color: #e8e8e8; /* 调整悬停颜色以匹配新背景 */
    }
  </style>
</head>

<body>
<!-- 顶部欢迎栏 -->
<div class="top-bar">
  <h1>欢迎来到网上银行模拟系统</h1>
</div>
<!-- 导航栏 -->
<div class="nav-bar">
  <a href="Transactions.html" id="transactionsLink">交易记录</a>
  <a href="/bindCard.html">一键绑卡</a>
  <a href="/register.html">注册</a>
  <a href="#">登录</a>
  <a href="userInfo.html">个人信息</a>
</div>
<!-- 主体内容容器 -->
<div class="container">
  <!-- 左侧操作栏 -->
  <div class="left-menu">
    <ul>
      <li><a href="queryBalance.html">查询余额</a></li>
      <li><a href="javascript:void(0);" onclick="logout()">注销账户</a></li>
      <li><a href="lose.html">挂失</a></li>
      <li><a href="index.html">退出</a></li>
    </ul>
  </div>
  <!-- 中间提示区域 -->
  <div class="center-tip">
    <p>请选择您的操作</p>
  </div>
  <!-- 右侧操作栏 -->
  <div class="right-menu">
    <ul>
      <li><a href="withdraw.html">取款</a></li>
      <li><a href="deposit.html">存款</a></li>
      <li><a href="transfer.html">转账</a></li>
      <li><a href="Loan.html">贷款申请</a></li>
    </ul>
  </div>
</div>
<script>
  let userId;

  // 获取当前用户信息，从中提取 userId
  fetch('/user/currentUser')
    .then(response => {
      if (!response.ok) {
        throw new Error('未登录或会话已过期');
      }
      return response.json();
    })
    .then(data => {
      if (data.code === 2000 && data.data) {
        userId = data.data.userId;
        console.log("当前用户ID:", userId);
        loadTransactions(userId);
      } else {
        alert('无法获取用户信息，请重新登录');
        window.location.href = '/userInfo.html'; // 跳转到登录页
      }
    })
    .catch(error => {
      console.error("获取用户信息失败:", error);
      alert("请先登录");
      window.location.href = '/userInfo.html'; // 跳转到登录页
    });

  function loadTransactions(userId) {
    fetch(`/dealings/transactions?userId=${userId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('网络响应失败');
        }
        return response.json();
      })
      .then(data => {
        const tbody = document.getElementById('transactionTableBody');
        tbody.innerHTML = '';
        if (data.length === 0) {
          const row = document.createElement('tr');
          row.innerHTML = `<td colspan="7">暂无交易记录</td>`;
          tbody.appendChild(row);
        } else {
          data.forEach(tx => {
            const row = document.createElement('tr');
            row.innerHTML = `
              <td>${tx.transactionsId || 'N/A'}</td>
              <td>${tx.fromAccountId || 'N/A'}</td>
              <td>${tx.toAccountId || 'N/A'}</td>
              <td>${tx.amount ? tx.amount.toFixed(2) : '0.00'}</td>
              <td>${tx.transactionTime || 'N/A'}</td>
              <td>${tx.transactionStatus || 'N/A'}</td>
              <td>${tx.feeAmount ? tx.feeAmount.toFixed(2) : '0.00'}</td>
            `;
            tbody.appendChild(row);
          });
        }
      })
      .catch(error => {
        console.error('获取交易记录失败:', error);
        const tbody = document.getElementById('transactionTableBody');
        tbody.innerHTML = `<tr><td colspan="7">加载交易记录失败，请刷新重试。</td></tr>`;
      });
  }
  async function logout() {
    if (!confirm("确定要注销账户吗？此操作不可恢复")) {
        return;
    }

    try {
        const response = await fetch('/user/logout', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
        });

        const result = await response.json();

        if (result.code === 2000) {
            alert("注销成功");
            window.location.href = '/index.html'; // 跳转到登录页
        } else {
            alert(result.msg || "注销失败，请稍后再试");
        }
    } catch (error) {
        console.error("注销异常:", error);
        alert("网络请求失败，请稍后再试");
    }
}

</script>

</body>

</html>